﻿@using Topro.Entity.Enum;
@{
    Layout = "~/Views/Shared/_Dialog.cshtml";
}
@model Topro.Entity.Response.Menu.MenuResponse
<section class="container-fluid" style="background-color: white;">

    <ul class="nav nav-tabs m15_t" id="myTab">
        <li class="active"><a href="#home" data-toggle="tab">基本信息</a></li>
        <li><a href="#permissions" data-toggle="tab">角色权限</a></li>
    </ul>
    <form class="form-horizontal m15_t" id="form">
        <div class="tab-content case">
            <input type="hidden" id="Id" name="Id" value="@(Model.Id)">
            <div class="tab-pane fade in active" id="home">
                <div class="form-group">
                    <label class="wd100 control-label"><span class="WdateFmtErr">*</span>名称：</label>
                    <div class="wd400 m15_l">
                        <input class="form-control" type="text" name="name" maxlength="40" value="@(Model.Name)" autocomplete="off" placeholder="长度必须介于 2 和 40 之间">
                    </div>
                </div>
                <div class="form-group">
                    <label class="wd100 control-label"><span class="WdateFmtErr">*</span>导航显示：</label>
                    <div class="wd400 m15_l">
                        <label class="m10_r">
                            <input type="radio" name="isNav" value="@((int)IsNav.显示)" @(Model.IsNav.Equals((int)IsNav.显示) ? "checked" : "")> 显示
                        </label>
                        <label>
                            <input type="radio" name="isNav" value="@((int)IsNav.不显示)" @(Model.IsNav.Equals((int)IsNav.不显示) ? "checked" : "")> 不显示
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="wd100 control-label">链接地址：</label>
                    <div class="wd400 m15_l">
                        <input class="form-control" type="text" name="url" maxlength="120" value="@(Model.Url)" autocomplete="off" placeholder="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="wd100 control-label"><span class="WdateFmtErr">*</span>排序：</label>
                    <div class="wd400 m15_l">
                        <input class="form-control" type="text" name="displayOrder" maxlength="2" value="@(Model.DisplayOrder.Equals(0)?"":Model.DisplayOrder.ToString())" autocomplete="off" placeholder="排序只能为整数">
                    </div>
                </div>
                <div class="form-group">
                    <label class="wd100 control-label"><span class="WdateFmtErr">*</span>状态：</label>
                    <div class="wd400 m15_l">
                        <label class="m10_r">
                            <input type="radio" name="status" value="@((int)MenuStatus.启用)" @(Model.Status.Equals((int)MenuStatus.启用) ? "checked" : "")> 启用
                        </label>
                        <label>
                            <input type="radio" name="status" value="@((int)MenuStatus.禁用)" @(Model.Status.Equals((int)MenuStatus.禁用) ? "checked" : "")> 禁用
                        </label>
                    </div>
                </div>
            </div>
            <input type="hidden" id="ParentId" name="ParentId" value="@(Model.ParentId)">
            <!--菜单-->
            <div class="tab-pane fade" id="permissions">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <button type="button" class="btn btn-success btn-xs" data-modal="@Url.Action("MenuPermission", "Auth")" data-title="权限选择" data-width="600" data-height="700" data-bottom="remove">&nbsp;<span class="glyphicon glyphicon-plus-sign"></span>添加</button>
                    </div>
                    <table class="table table-bordered table-hover privileges">
                        <thead>
                            <tr>
                                <th class="t_l">权限名称</th>
                                <th class="t_l wd150">权限代码</th>
                                <th class="t_c wd75">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            @{
                                if (Model != null && Model.PermissionResponse != null && Model.PermissionResponse.Any())
                                {
                                    foreach (var item in Model.PermissionResponse)
                                    {
                                        <tr>
                                            <td class="t_l">
                                                <input style="display: none" name="Id" type="checkbox" value="@(item.Id)">@(item.Name)
                                            </td>
                                            <td class="t_l wd150">@(item.Code)</td>
                                            <td class="t_c wd75"><button type="button" class="btn btn-danger btn-xs" onclick="removeRow(this) "><span class="glyphicon glyphicon-trash"></span> 删除</button></td>
                                        </tr>
                                    }
                                }
                                else
                                {
                                    <tr class="noRecord">
                                        <td colspan="3" class="t_c">暂无记录！</td>
                                    </tr>
                                }
                            }
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </form>

</section>
<script type="text/x-dot-template" id="menuPermissionTpl">
    {{? it && it.length>0}}
    {{ for(var prop in it) { }}
    <tr>
        <td class="t_l">
            <input style="display: none" name="Id" type="checkbox" value="{{=it[prop]['Id']}}">{{=it[prop]['Name']}}
        </td>
        <td class="t_l wd150">{{=it[prop]['Code']}}</td>
        <td class="t_c wd75"><button type="button" class="btn btn-danger btn-xs" onclick=" removeRow(this) "><span class="glyphicon glyphicon-trash"></span> 删除</button></td>
    </tr>
    {{ } }}
    {{??}}
    <tr class="noRecord">
        <td colspan="3" class="t_c">暂无记录！</td>
    </tr>
    {{?}}
</script>
<script type="text/x-dot-template" id="noRecordTpl">
    <tr class="noRecord">
        <td colspan="3" class="t_c">暂无记录！</td>
    </tr>
</script>
@section footerScript{
    <script type="text/javascript">
        function removeRow(obj) {

            var length = $("table.privileges > tbody > tr").length;

            $(obj).parent().parent().remove();

            if (length == 1) {
                var noRecordText = doT.template($("#noRecordTpl").text());
                $("table.privileges tbody").append(noRecordText());
            }
        }

        function insertRow(obj) {

            var menuPermissionText = doT.template($("#menuPermissionTpl").text());

            $("table.privileges > tbody > tr.noRecord").remove();

            $("table.privileges tbody").append(menuPermissionText(obj));
        }

        function save() {

            var cover = FlashPay.UI.Mask({
                obj: $("body"),
                opacity: 0.5
            });

            var data = $("#form").serializeJSON();

            var privileges = [];

            $("table.privileges > tbody > tr").each(function (index) {
                var id = $(this).find("input[name='Id']").val();
                if (id != null)
                    privileges.push(id);
            });

            data.permissionIds = privileges;

            Topro.Util.Ajax({
                type: "POST",
                url: "/Auth/SaveMenu",
                data: data,
                success: function (res) {
                    if (res.success) {
                        cover.Remove();
                        Topro.UI.DialogOpener().Tip_success("操作成功！");
                        Topro.UI.DialogOpener().doSearch();
                        Topro.UI.CloseDialog();
                    } else {
                        cover.Remove();
                        Topro.UI.Tip_short_warning("操作失败！" + res.message);
                    }
                },
                error: function (json) {
                    cover.Remove();
                    Topro.UI.Tip_warning("操作失败！请查看网络，请重试。");
                }
            });

        }
    </script>
}